//node 语法
//这个配置文件 就是 一个 js文件  通过对node 中的 模块的操作 向外暴露了 一个配置对象
const path = require('path')
const webpack = require('webpack')//启用热更新的第二步
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    //手动指定 入口和 出口 
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'//指定的文件的名称
    },
    devServer:{//“dev”:”webpack-dev-server --open --port 3000 --contentBase src --hot”
        //这是配置dev-server的第二种方式 相对麻烦一些
        open:true,//自动打开浏览器
        port:3000,//端口
        //contentBase:'src',
        hot:true //热更新 热重载的第一步

    },
    plugins:[//插件
        new webpack.HotModuleReplacementPlugin(),//new 一个 热更新的模块对象 启用热更新的第三步
        new htmlWebpackPlugin({//创建 一个 在内存中 生成 html 页面的插件  根据
            template:path.join(__dirname,'./src/index.html'),//指定 末班页面 ，将来会根据指定的页面路径 去生成内存中的 页面
            filename:'index.html' //指定生成的页面的 文件名称
        }),
        new VueLoaderPlugin(),
    ],
    module:{//这个节点  用于配置 多有第三方 模块的加载器
        rules:[//第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']},//配置.css文件的第三方loader 规则
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置.less文件的第三方loader 规则
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//配置.scss文件的第三方loader 规则
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'},//配置图片文件的第三方loader 规则
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//配置字体文件的第三方loader 规则
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//这是 babel 来转换高级的 es 语法
            {test:/\.vue$/,use:'vue-loader'},//处理.vue文件类型的文件
        ]
    },
    resolve:{
        alias:{//修改　ｖｕｅ　被导入　时候包的路径
            "vue$":"vue/dist/vue.js"
        }
    }
}
// 执行 webpack 命令时  webpack执行了
//1. webpack 发现 我们并没有通过命令的形式去指定 入口出口 
//2.webpack回去 项目的根目录下  查找一个 webpack.config.js的配置文件
//3.当找到 配置文件的时候  webpack回去解析 并且 去执行这个配置文件
//4.当webpack 拿到配置对象后 就拿到了 配置对象中 指定的入口和出口  然后进行打包构建




//使用 webpack-dev-server 这个工具  来时先自动打包编译功能
//1. 运行 npm -i webpack-dev-server -D /cnpm i webpack-dev-server -D把这个工具安装到 项目的 本地开发依赖